<template>
  <h5>付款记录</h5>
  <el-card class="m-t-8" v-for="item in tableData" v-if="tableData.length > 0">
    <div class="flex-center-between font-extraSmall">
      <span>{{ NullTransform(item.methodname) }}</span>
      <span>{{ item.opttime }}</span>
    </div>
    <div class="flex-center-between m-t-8">
      <span class="font-bold">
        {{ item.projectname }}
      </span>
      <span class="font-bold">￥{{ item.payprice }}</span>
    </div>
    <div class="flex-center-between m-t-8">
      <span class="font-extraSmall"> 操作人：{{ item.operator }} </span>
      <el-button v-if="item.auditstatus == 0" size="small" disabled>已撤销</el-button>
      <el-button v-else size="small" plain @click.stop="cancelAccItem(item)">撤销</el-button>
    </div>
    <div class="font-extraSmall">备注：{{ item.remark }}</div>
  </el-card>
  <el-empty v-else :image-size="100" description="暂无记录!" />
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, toRefs } from 'vue';
import purchaselistApi from '../api/api';
import { ElMessage, ElMessageBox } from 'element-plus';
import NullTransform from '@/utils/nullTransform';
const emit = defineEmits(['change']);
const state = reactive({
  tableData: [],
  ftype: 'all',
  entryid: ''
});
const { tableData } = toRefs(state);
function show(table) {
  state.tableData = table;
}

function cancelAccItem(row) {
  ElMessageBox.confirm('你确定要撤销该笔记录吗?', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    callback: (action) => {
      if (action == 'confirm') {
        purchaselistApi.cancelPayment({ id: row.id }).then((res) => {
          ElMessage.success('撤销成功');
          emit('change');
        });
      }
    }
  });
}
defineExpose({
  show
});
</script>

<style></style>
